import { useEffect, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  // 如果组件中有另外一个状态，当另一个状态更改时，effect 回调也会执行，就会造成性能损耗
  // useEffect(() => {
  //   console.log('1')
  //   document.title = `亚瑟王`
  // })

  // 性能优化：跳过不必要的执行，需要给 useEffect 添加第二个参数
  // 如果 useEffect 内部不依赖外部的数据，直接写一个空数组即可
  useEffect(() => {
    console.log('内部不依赖外部的数据，只会执行一次')
    document.title = `亚瑟王`
  }, [])

  // 如果 useEffect 内部依赖外部的数据，可将依赖的数据放到数组中
  // 那么只有依赖的数据发生变化，才会执行相应的 effect
  useEffect(() => {
    console.log('1')
    document.title = `亚瑟王 ${count}`
  }, [count])

  const updateCount = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h4>useEffect</h4>
      <p>{count}</p>
      <button onClick={updateCount}>更新 count</button>
    </div>
  )
}

export default App
